<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>proton.js todo-list implementation</title>
</head>
<body>
    <style>
        * {font: 18px/24px Helvetica}
        .none {display:none;}

        /* task */
        .task {
            padding: 5px  10px 5px 27px;
            position:relative;
            border-bottom: 1px solid #ccc;
        }
        .task input.done {
            position:absolute;
            left:0px;
            top:9px;
        }
        .task:hover {
            background:  #eee;
        }
        .task a.remove {
            color: #777;
            font-size:14px;
            float:right;
            display:none;
        }
        .task:hover a.remove {
            display:inline-block;
        }
        .task input.title {display:none;}
        .task.edit input.title {display:block;}
        .task.edit div.title {display:none;}
        .task.done div.title {text-decoration:line-through;}

        /* manager */
        .manager {
            width:300px;
            border: 1px solid #ccc;
            padding: 20px;
        }
        .manager input.add {width:100%;}

        .task .title.empty {color: #999;}
        .statistics, .statistics * {
            font-size: 14px;
        }
        .statistics .delete-completed {
            float:right;
            display:none;
            cursor:pointer;
            color: #777;
        }
        .statistics .delete-completed:hover {
            text-decoration:underline;
        }
        .statistics.has-completed .delete-completed { display:block; }
    </style>
    <div id="target"></div>
    <div id="template" style="display:none;">
        <div class="task">
            <a href="#" class="remove" title="Remove this task">remove</a>
            <input class="done" type="checkbox">
            <div class="title"></div>
            <input class="title">
        </div>
        <div class="manager">
            <label>
                <div>What do you want to do today?</div>
                <input class="add" placeholder="buy milk">
            </label>
            <div class="tasks"></div>
            <div class="statistics">
                <span class="open-tasks">Open tasks left: <span class="value"></span></span>
                <span class="delete-completed">Delete <span class="value"></span> completed tasks</span></span>
            </div>
        </div>
    </div>
    <div id="scripts" style="display:none;">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
        <script type="text/javascript" src="../proton.js"></script>
        <script type="text/javascript" src="models/todo/task.js"></script>
        <script type="text/javascript" src="models/todo/manager.js"></script>
    </div>
</body>

<script type="text/javascript">
    var gManager = new Manager();
    gManager.getProxy("storage").load();
    $("#target").append(gManager.getView().getEl());
</script>
</html>